<template>
  <div class="time">
    <div id="app">
      <div class="clock">
        <div class="center">
          <div
              v-for="item in 12"
              :key="item"
              :style="'transform: rotateZ('+(30*item+180)+'deg)'"
              class="hour">
            <div class="number">
              <span :style="'transform: rotateZ('+(-30*item+180)+'deg)'">{{ item }}</span>
            </div>
          </div>

          <div
              :style="'transform: rotateZ('+(30*hours+180)+'deg)'"
              class="hour-pointer">
            <div class="pointer"></div>
          </div>

          <div
              :style="'transform: rotateZ('+(6*minutes+180)+'deg)'"
              class="minutes-pointer">
            <div class="pointer"></div>
          </div>

          <div
              :style="'transform: rotateZ('+(6*seconds+180)+'deg)'"
              class="seconds-pointer">
            <div class="pointer"></div>
          </div>

        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      hours: 0,
      minutes: 0,
      seconds: 0,
      interval: null
    }
  },
  created() {
    this.interval = setInterval(() => {
      const now = new Date()
      this.minutes = now.getMinutes()
      this.hours = now.getHours() + (this.minutes / 60)
      this.seconds = now.getSeconds()
    }, 1000)
  },
  destroyed() {
    if (this.interval) {
      clearInterval(this.interval)
      this.interval = null
    }
  },
  methods: {}
}

</script>
<style scoped>
* {
  margin: 0;
  padding: 0;
  font-size: 39px;
}

#app {
  /*--shadow:-5px -5px 20px 5px #ffffff,5px 5px 20px 5px #cccccc;*/
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

#app::after {
  position: absolute;
  left: 0;
  top: 0;
  content: '';
  opacity: .3;
}

.clock {
  width: 400px;
  height: 400px;
  border-radius: 50%;
  box-shadow: var(--shadow);
  position: relative;
}

.center {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.hour, .hour-pointer, .minutes-pointer, .seconds-pointer {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  position: absolute;
  left: 0;
  top: 0;
}

.number, .pointer {
  position: absolute;
  left: 50%;
  transform: translate(-50%, 0);
  width: 40px;
  height: 200px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.hour-pointer > .pointer {
  width: 20px;
  height: 100px;
  background-color: #c45656;
  border-radius: 10px;
}

.minutes-pointer > .pointer {
  width: 16px;
  height: 140px;
  background-color: #f89898;
  border-radius: 10px;
}

.seconds-pointer > .pointer {
  width: 10px;
  height: 180px;
  background-color: #fab6b6;
  border-radius: 5px;
}
</style>
